<template>
    <v-row justify="center" v-if="dialog">
        <v-dialog v-model="dialog" fullscreen :scrim="false" transition="dialog-bottom-transition">
            <v-card>
                <v-toolbar dark color="primary">
                    <v-btn icon dark @click="closeDialog">
                        <v-icon>mdi-close</v-icon>
                    </v-btn>
                    <v-toolbar-title>详情</v-toolbar-title>
                    <v-spacer></v-spacer>
                </v-toolbar>
                <v-overlay :model-value="overlay" class="align-center justify-center">
                    <v-progress-circular color="primary" indeterminate size="64"></v-progress-circular>
                </v-overlay>
                <div style="overflow-y: auto;padding-bottom: 10px;height: 100%;">
                    <div style="padding-bottom: 50px;">
                        <word-view :show-candidate="false" ref="wordView" initiative="passive"/>
                    </div>
                    <v-btn size="large" style="position: fixed;bottom: 0px;" color="green" width="100%" @click="closeDialog">关闭</v-btn>
                </div>
            </v-card>
        </v-dialog>
    </v-row>
</template>

<script>
import WordView from "../WordView.vue";
export default {
    name: 'WordDetailDialogView',
    components: { WordView },
    props:{
        closeDialogListener:Function
    },
    data() {
        return {
            dialog: false,
            overlay: false
        }
    },
    methods: {
        toggle(action, obj,wordObj) {
            this.dialog = action
            if(wordObj!=null){
                setTimeout(() => {
                    this.$refs.wordView.setWordDetail(wordObj)
                }, 100);
                return
            }
            if (action && obj != null) {
                this.overlay = true
                setTimeout(() => {
                    this.overlay = false
                    this.$refs.wordView.detail(obj)
                }, 100);
            }
        },
        closeDialog(){
            this.dialog=false
            if(this.closeDialogListener!=null)this.closeDialogListener()
        }
    }
}
</script>

<style></style>